<template>
    <div class="registerFor warp">
        <div class="reg_money reg_top">
            <div class="reg_m_tit">
                <p class="reg_m_tit_btn">保证金</p>
            </div>
            <div class="reg_m_content reg_bgc">
                <p>
                    <span>拍卖会名称：</span>
                    <span>{{ registerData.auction_name }}</span>
                </p>
                <p>注意：保证金仅适用于该项目，线下缴纳保证金，缴纳后联系拍卖公司进行审核，竞买结束后若未中标，拍卖公司进行线下退回。</p>
                <p>
                    <span>当前： </span>
                    <span class="red">{{registerData.isfull=='2'?'单标的报名':'全场拍卖'}}</span>
                </p>
                <p>
                    <span>保证金</span>
                    <span>￥{{moneyAll}}</span>
                </p>
            </div>
        </div>
        <div class="reg_selectLots reg_top">
            <div class="reg_m_tit reg_s_tit">
                <p class="reg_m_tit_btn">选择标的</p>
                <p class="reg_s_tit_p">请选择您要报名参拍的标的（可多选）</p>
            </div>
            <div class="reg_s_con reg_bgc">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="(val,i) in lotsData" :label="val.id" :key="i" :disabled="val.is_forbidden">{{val.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div class="reg_agreement reg_top">
            <div class="reg_m_tit reg_s_tit">
                <p class="reg_m_tit_btn">竞拍协议</p>
                <p class="reg_s_tit_p">竞买人请认真阅读并同意以下事项</p>
            </div>
            <div class="reg_a_con reg_bgc">
                <p>1. 竞买人成功竞得拍卖标的后，如果悔拍，保证金不予退还并承担相应的法律责任。</p>
                <p>2. 竞买人如未实地看样，视为接受标的所有瑕疵等细则。</p>
                <p>
                    <span>3. 本场拍卖会</span>
                    <span class="red">《拍卖公告》</span>
                    <span>及</span>
                    <span class="red">《竞买须知》</span>
                </p>
                <p>
                    <span>4.</span>
                    <span class="red" @click="paiRole">《盟拍网拍卖规则》</span>
                    <span>及</span>
                    <span class="red" @click="usedRole">《网络拍卖平台使用协议》</span>
                </p>
                <div>
                    <div class="el_dialog_div">
                        <p class="big_text" v-html="pai_roleHtml"></p>
                    </div>
                </div>
                <p>
                </p>
                <p class="pcheck">
                    <el-checkbox v-model="agreeChecked" @change="agreeChange">
                        本人已知晓并同意以上所有事项
                    </el-checkbox>
                    <span class="red">（提示：需将盟拍网平台拍卖规则以及网络拍卖平台使用协议阅读完毕后才可勾选）</span>
                </p>
            </div>
        </div>
        <div class="reg_name reg_top">
            <div class="reg_m_tit">
                <p class="reg_m_tit_btn">竞买人身份</p>
            </div>
            <div class="reg_n_con reg_bgc">
                <el-form :model="bidderData" status-icon label-width="100px" class="demo_ruleForm">
                    <el-form-item label="竞买人姓名">
                        <el-input disabled style="width:180px" v-model="bidderData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="证件">
                        <el-select v-model="bidderData.card_type" disabled style="width:180px; margin-right: 10px;">
                            <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <el-input disabled style="width:250px"  v-model="bidderData.card_num"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input disabled style="width:180px" v-model.number="bidderData.mobile"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="reg_pay reg_top">
            <div class="reg_m_tit">
                <p class="reg_m_tit_btn">支付方式</p>
            </div>
            <div class="reg_p_con reg_bgc">
                <el-checkbox v-model="relationChecked">联系拍卖企业线下支付保证金</el-checkbox>
                <div class="reg_p_payee" v-show="relationChecked">
                    <p>收款账号</p>
                    <p>开户名称：河北一盟拍卖有限公司</p>
                    <p>开户行：中国民生银行石家庄西二环北路支行</p>
                    <p>账号：170 473 149</p>
                    <p>联系电话:{{ contactNumber }}</p>
                </div>
                <div class="reg_p_c_btn">
                    <v-btn type="plain" size="small" @click="nowSubmitData">
                        提交
                    </v-btn>
                </div>
            </div>
            
        </div>

        <el-dialog
            :title="title"
            :visible.sync="dialogVisible"
            center
            width="60%">
            <div class="req_dialog_div"  @scroll="scrollEventFn">
                <p class="big_text" v-html="dialogContent"></p>
            </div>
            <span slot="footer" class="dialog-footer">
                <!-- <el-button type="danger" :disabled="btnDis" @click="reqDialog">已阅读并同意以上协议内容</el-button> -->
                <v-btn type="plain" size="large" @click="reqDialog" :disabled="btnDis">
                    已阅读并同意以上协议内容
                </v-btn>
            </span>
        </el-dialog>

    </div>
</template>
<script>
import {enroll,enrollAdd} from '@/api/interface'
import vBtn from '@/components/title/b-btn.vue'
export default{
    name:'registerFor',
    components:{
        vBtn
    },
    data() {
        return {
            registerData:{},
            moneyAll:'',
            arrMoney:[],
            bidderData:{
                name:"",
                card_type:'',
                card_num:'',
                mobile:""
            },
            isIndeterminate: true,
            checkAll:false,
            lotsData:[],
            lotsDataDisable:[],
            checkedCities:[],
            typeOptions:[
                {
                    value: '1',
                    label: '身份证'
                },{
                    value: '2',
                    label: '营业执照'
                },
            ],
            pai_roleHtml:'',
            dialogVisible:false,
            title:'盟拍网拍卖规则',
            dialogContent:"",
            agreeChecked:false,
            btnDis:true,
            only:'1',
            relationChecked:false,
            selectedLotsId:[],
            allNoDisableList:[],
            contactNumber:''
        }
    },
    created(){
        this.$emit('public_header', {header:true,footer:true});
        this.getEnroll();
    },
    methods:{
        getEnroll(){
            var obj = {
                lots_id:this.$route.query.lotsId,
                auction_id:this.$route.query.auctionid
            };
            enroll(obj).then(res=>{
                if(res.data){
                    this.registerData=res.data;
                    var arr=[];
                    this.arrMoney= [];
                    res.data.lotsData.forEach((item,index)=>{
                        if(item.selected){
                            arr.push(item.id);
                            this.arrMoney.push(parseInt(item.bond))
                            this.selectedLotsId.push(item.id);
                        }
                        if(item.is_forbidden){ 
                            arr.push(item.id);
                            this.lotsDataDisable.push(item.id);
                            item.is_forbidden = true;
                        }else{
                            item.is_forbidden = false;
                            this.allNoDisableList.push(item.id);
                        }

                        if(item.entry_phone){
                            if(item.entry_phone == item.entry_phone){
                                this.contactNumber=item.entry_phone
                            }
                        }
                    })
                    this.countArrMoney()
                    this.lotsData = res.data.lotsData;
                    this.checkedCities = arr;
                    this.bidderData = res.data.bidder_data;
                    this.bidderData.name=this.formatStr(this.bidderData.name,0,1)
                    this.bidderData.card_num=this.formatStr(this.bidderData.card_num,4,11)
                    this.bidderData.mobile=this.formatStr(this.bidderData.mobile,3,7)
                    this.pai_roleHtml=this.showHtml(this.registerData.pai_role)
                }
                    
            }).catch(err=>{
                if(err.code == 40001){
                    this.toRealName()
                    
                }else if(err.code == 40002){
                    this.$router.push({path:'/lots/detail',query: {lotsId:this.$route.query.lotsId,auctionid:this.$route.query.auctionid}})  
                }else if(err.code == 40003){
                    this.toRealName()
                }
            });
        },
        nowSubmitData(){
            //报名提交
            if(!this.arrMoney.length){
                this.$message({
                    message: '最少选择一项标的',
                    type: 'warning'
                });
            }else{
                if(this.agreeChecked == false){
                    this.$message({
                        message: '请阅读竞拍协议中所有事项并勾选',
                        type: 'warning'
                    });
                    
                }else{
                    if(this.relationChecked == false){
                        this.$message({
                            message: '请勾选支付方式',
                            type: 'warning'
                        });
                    }else{
                        var lots_ids =this.selectedLotsId.join(",");
                        var obj = {
                            lots_ids:lots_ids,
                            auction_id:this.$route.query.auctionid,
                            state:this.registerData.isfull
                        }
                        enrollAdd(obj).then(res=>{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.$router.push({path:'/lots/detail',query: {lotsId:this.$route.query.lotsId,auctionid:this.$route.query.auctionid}})
                        });
                    }
                }
            }
        },
        handleCheckAllChange(val) {  //全选
            const arr= this.lotsData.map((item,index)=>{
                return item.id;
            })
            this.isIndeterminate = false;
            if(val){
                this.checkedCities = arr;
                this.allMoneyChange(this.allNoDisableList);
                
            }else{
                this.checkedCities = this.lotsDataDisable;
                this.moneyAll =0;
                this.arrMoney=[];
            }
            
            
        },
        handleCheckedCitiesChange(value) {
            let checkedCount = value.length;
           let newArr = value.filter(item => !this.lotsDataDisable.includes(item));
            this.allMoneyChange(newArr);
            this.checkAll = checkedCount === this.lotsData.length;
            this.isIndeterminate  = checkedCount > 0 && checkedCount < this.lotsData.length;
            if(checkedCount==0){
                this.moneyAll =0;
                this.arrMoney=[];
            }

        },
        // 富文本处理
        showHtml(str){
        return str
            .replace(str ? /&(?!#?\w+;)/g : /&/g, '&amp;')
            .replace(/&lt;/g,"<")
            .replace(/&gt;/g,">")
            .replace(/&quot;/g,"\"")
            .replace(/&#39;/g, "\'")
            .replace(/&amp;nbsp;/g,'\u3000')
        },
        paiRole(){
            this.pai_roleHtml=this.showHtml(this.registerData.pai_role)
        },
        usedRole(){
            this.pai_roleHtml=this.showHtml(this.registerData.used_role)
        },
        reqDialog(){
            if(this.only =='1'){
                this.title='网络拍卖平台使用协议';
                this.dialogContent=this.showHtml(this.registerData.used_role)
                this.only ='2'
            }else if(this.only=='2'){
                this.dialogVisible = false;
                this.agreeChecked=true;
            }
            
        },
        scrollEventFn(e){
            //e.srcElement.scrollTop: 滚动条距离页面顶部距离
            //e.srcElement.clientHeight: 滚动页面高度
            //e.srcElement.scrollHeight: 滚动条高度
            if (e.srcElement.scrollTop + e.srcElement.clientHeight > e.srcElement.scrollHeight - 50) {//-50距离底部50px是触发以下内容
                this.btnDis=false;
            }
            
            
        },
        agreeChange(){
            // console.log(this.agreeChecked)
            if(!this.agreeChecked){
                this.agreeChecked=false;
            }else{
                this.agreeChecked=false;
                this.dialogVisible = true;
                this.title='盟拍网拍卖规则';
                this.dialogContent=this.showHtml(this.registerData.pai_role)
                this.btnDis=true;
                this.only='1'
            }
            
        },
        countArrMoney(){
            var all;
            console.log(this.arrMoney);
            if(this.arrMoney.length > 1){
                this.arrMoney.forEach((item, index, array) => {
                    if(index == 0){
                        all= item;
                    }else{
                        all= item + all;
                    }
                    
                });
            }else{
                all=this.arrMoney[0]
            }
            this.moneyAll = all;
        },
        allMoneyChange(value){
            var arrM=[];
            var sel =[]
            if(value){
                value.forEach((item, index, array) => {
                    this.lotsData.forEach((val, i, arr)=>{
                        if(item == val.id){
                            arrM.push(parseInt(val.bond))
                            sel.push(val.id)
                        }
                    });
                });
            }
            this.arrMoney = arrM;
            this.countArrMoney()
            this.selectedLotsId=sel;
        },
        toRealName(){
            this.$confirm('未进行实名认证, 确认进行实名认证吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                // 跳转到实名认证
                this.$router.push({path:'/userCenter/userInfo',query: {index:'1'}})
            }).catch(() => {
                this.$router.push({path:'/lots/detail',query: {lotsId:this.$route.query.lotsId,auctionid:this.$route.query.auctionid}})      
            });
        },
        formatStr(value,start,end){
            return value.split('').fill('*',start,end).join('')
        }

    }
}

</script>
<style lang="less" scoped>
@import '@/styles/index.less';
.registerFor{
    .reg_money{
       
        .reg_m_content{
            height: 100px;
        }
    }
    .reg_agreement{
        .reg_a_con{
            p{
                padding-bottom: 10px;
            }
            .el_dialog_div{
                height: 300px;
                border: 1px solid #ccc;
                overflow-y: scroll;
            }
            .el_dialog_div::-webkit-scrollbar{
                display: none;
            }
            .pcheck{
                /deep/.is-checked{
                    .el-checkbox__inner{
                        background-color: @base-color;
                    }
                    .el-checkbox__label{
                        color:@base-color;
                    }    
                }
                /deep/.el-checkbox__inner{
                    border-color:@base-color;
                }
                span{
                    font-size: 14px;
                }
            }
        }
    }
    .reg_name{
        .reg_n_con{
            /deep/.demo_ruleForm{
                // width: 460px;
                .el-form-item__content{
                    display: flex;
                }
            }
           
        }
    }
    .reg_selectLots{
        .reg_s_con{
            /deep/.is-checked{
                .is-disabled{
                    .el-checkbox__inner{
                        background-color: #f2f6fc;
                        border-color: #dcdfe6;
                    }
                }
                .el-checkbox__inner{
                    background-color: @base-color;
                    border-color:@base-color;
                }
                .el-checkbox__label{
                    color: @base-color;
                }    
            }
            /deep/.is-focus{
               .el-checkbox__inner{
                border-color:@base-color;

               } 
            }
            .el-checkbox{
                margin-bottom: 20px;
                /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner{
                    background-color: @base-color;
                }
            }
        }
    }
    .reg_pay{
        .reg_p_con{
            /deep/.is-checked{
                .el-checkbox__inner{
                    background-color: @base-color;
                }
                .el-checkbox__label{
                    color: @base-color;
                }    
            }
            /deep/.el-checkbox__inner{
                border-color: @base-color;
            }
            .el-checkbox{
                margin-bottom: 14px;
            }
            .reg_p_payee{
                font-size: 14px;
                p{
                    padding-bottom: 6px;
                }
            }
            .reg_p_c_btn{
                display: flex;
                flex-direction:row-reverse;
                .el-button{
                    color: #fff;
                    background: @base-color;
                    border: 1px solid @base-color;
                }
            }
        } 
    }


    .reg_s_tit{
        display: flex;
        .reg_s_tit_p{
            height: 40px;
            line-height: 40px;
            margin-left: 20px;
        }
    }
    .reg_m_tit{
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #d13a29;
        .reg_m_tit_btn{
            width: 110px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            background:radial-gradient(#d13a29,#cc2917);
            border-radius: 4px 4px 0px 0px;
        }
    }
    .reg_top{
        margin-top: 10px;
    }
    .reg_bgc{
        background-color: #fff;
        padding: 20px;
    }
    .req_dialog_div{
        height: 400px;
        overflow-y: scroll;
    }
    .req_dialog_div::-webkit-scrollbar{
        display: none;
    }
}
</style>